.channel {
  height: 1005px;
  width: 100%;
}
.channel > .wrapper > .channel-h3 {
  box-sizing: border-box;
  height: 65px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.channel > .wrapper > .channel-h3 > h3 {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin: 0 20px;
}
.channel > .wrapper > .channel-h3 > .befo {
  display: inline-block;
  width: 25px;
  height: 20px;
  background: url("../../img/iconfont/channel-h3.png") no-repeat;
}
.channel > .wrapper > .channel-h3 > .after {
  display: inline-block;
  width: 25px;
  height: 20px;
  background: url("../../img/iconfont/channel-h3.png") -26px 0px no-repeat;
}
.channel > .wrapper > .parent {
  width: 100%;
  height: 900px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
.channel > .wrapper > .parent > div {
  width: 289px;
  box-sizing: border-box;
  padding: 15px;
  margin: 5px;
  background-color: #fff;
}
.channel > .wrapper > .parent > div > img:hover {
  transition: 0.5s;
  opacity: 0.8;
}
.channel > .wrapper > .parent > div > p {
  display: flex;
  align-items: flex-end;
}
.channel > .wrapper > .parent > div > p > a {
  text-align: center;
}
.channel > .wrapper > .parent > div > p > a:nth-of-type(1) {
  font-size: 24px;
  font-weight: 700;
  padding-right: 5px;
}
.channel > .wrapper > .parent > div > p:nth-last-of-type(1) {
  padding-top: 10px;
}
.channel > .wrapper > .parent > div > p:nth-last-of-type(1) > img {
  width: 120px;
  height: 100px;
  margin: 5px 10px 0px 5px;
}
.channel > .wrapper > .parent > div > p:nth-last-of-type(1) > img:hover {
  transition: 0.5s;
  opacity: 0.8;
}
.channel > .wrapper > .parent > .div1 {
  grid-area: 1 / 1 / 3 / 2;
  padding: 0;
}
.channel > .wrapper > .parent > .div1 > img {
  width: 100%;
  height: 100%;
}
.channel > .wrapper > .parent > .div2 {
  padding: 0;
  grid-area: 1 / 2 / 3 / 3;
}
.channel > .wrapper > .parent > .div2 > img {
  width: 100%;
  height: 100%;
}
.channel > .wrapper > .parent > .div3 {
  grid-area: 1 / 3 / 2 / 4;
}
.channel > .wrapper > .parent > .div4 {
  grid-area: 1 / 4 / 2 / 5;
}
.channel > .wrapper > .parent > .div5 {
  grid-area: 2 / 3 / 3 / 4;
}
.channel > .wrapper > .parent .div6 {
  grid-area: 2 / 4 / 3 / 5;
}
.channel > .wrapper > .parent .div7 {
  grid-area: 3 / 1 / 4 / 2;
}
.channel > .wrapper > .parent .div8 {
  grid-area: 3 / 2 / 4 / 3;
}
.channel > .wrapper > .parent .div9 {
  grid-area: 3 / 3 / 4 / 4;
}
.channel > .wrapper > .parent .div10 {
  grid-area: 3 / 4 / 4 / 5;
}
.channel > .wrapper > .parent .div11 {
  grid-area: 4 / 1 / 5 / 2;
}
.channel > .wrapper > .parent .div12 {
  grid-area: 4 / 2 / 5 / 3;
}
.channel > .wrapper > .parent .div13 {
  grid-area: 4 / 3 / 5 / 4;
}
.channel > .wrapper > .parent .div14 {
  grid-area: 4 / 4 / 5 / 5;
}
.channel > .wrapper > .parent .div15 {
  grid-area: 5 / 1 / 6 / 2;
}
.channel > .wrapper > .parent .div16 {
  grid-area: 5 / 2 / 6 / 3;
}
.channel > .wrapper > .parent .div17 {
  grid-area: 5 / 3 / 6 / 4;
}
.channel > .wrapper > .parent .div18 {
  grid-area: 5 / 4 / 6 / 5;
}
